<template>
  <div 
    class="search-input-root" 
    :class="{searching: searching, 'show-left': isShowLeft, 'show-right': isShowRight}"
    >
    <!--左边部分-->
    <div class="left-box" v-if="isShowLeft">
      <div class="left-content">
        <span>{{selectedFilter.label}}</span>
        <i class="iconfont  icon-xiala"></i>
      </div>
      <select class="opacity-select" v-model="currentFilterValue" @change="onFilterChange">
        <option v-for="filter in filters" :key="filter.value" :value="filter.value">{{filter.label}}</option>
      </select>
    </div>

    <!--中间输入框-->
    <div class="search-box">
      <input :placeholder="placeholder" class="search-input" type="text" :value="currentKey" @input="onInputChange">
      <i class="iconfont icon-search"></i>
      <i class="iconfont icon-delete_fill" v-show="searching" @touchend="onCancel"></i>
    </div>

    <!--右边按钮-->
    <div class="right-box" v-if="isShowRight" @touchend="emit('rightClick')">
      <i class="iconfont" :class="rightIconClass"></i>
    </div>
  </div>
</template>
  
<script>
  export default {
    name: 'SearchInput',

    props: {
      placeholder: {
        default: '请输入关键字'
      },
      value: {
        type: String,
        default: ''
      },
      filters: {
        type: Array,
        default () {
          return [
            // {
            //   label: '请选择',
            //   value: 0
            // },
            // {
            //   label: '111',
            //   value: 1
            // }
          ]
        }
      },
      selectedFilterValue: {
        default: ''
      },
      rightIconClass: {
        type: String,
        default: ''
        // default: 'icon-add'
      }
    },

    data () {
      return {
        currentFilterValue: this.selectedFilterValue,
        currentKey: this.value
      }
    },

    computed: {
      // 当前选中的filter
      selectedFilter () {
        let result = null
        this.filters.forEach(filter => {
          if (filter.value === this.currentFilterValue) {
            result = filter
          }
        })
        return result || this.filters[0]
      },

      // 是否显示左侧内容
      isShowLeft () {
        return this.filters.length > 0
      },

      // 是否显示右侧内容
      isShowRight () {
        return this.rightIconClass.length > 0
      },

      // 当前是否正在输入
      searching () {
        return !!this.currentKey
      }
    },

    watch: {
      value (val) {
        this.currentKey = val
      },
      selectedFilterValue (val) {
        this.currentFilterValue = val
      }
    },

    mounted () {},

    methods: {
      onCancel () {
        this.onValueChange('')
      },
      onInputChange (event) {
        let value = event.target.value
        this.onValueChange(value)
      },

      onValueChange (value) {
        this.emit('change', value)
        this.emit('input', value)
        this.emitChanged(value)
      },

      emitChanged (value) {
        window.clearTimeout(this.emitTimeId)
        this.emitTimeId = setTimeout(() => {
          this.emit('changed', value)
        }, 1000)
      },

      onFilterChange () {
        console.log(this.selectedFilter)
        this.emit('filterChange', this.selectedFilter)
      },

      emit (...params) {
        this.$emit(...params)
      }
    }
  }
</script>

<style lang="stylus">
.search-input-root
  position relative
  width 100%
  height 1.2rem
  padding 0.25rem 1rem
  box-sizing border-box
  white-space nowrap
  transition all ease 0.3s
  border-top 1px solid #bbb
  border-bottom 1px solid #bbb
  &.show-left
    padding-left 2rem
  &.show-right
    padding-right 1.2rem

  .left-box
  .right-box
    position absolute
    top 0
    height 1.2rem
    padding 0.2rem 0
    box-sizing border-box
  .left-box
    width 2rem
    left 0
    .left-content
      text-align center
      line-height 0.8rem
      color #555
      font-size 0.35rem
      .iconfont
        font-size 0.4rem
    .opacity-select
      position absolute
      left 0
      top 0
      width 100%
      height 100%
      opacity 0


  .right-box
    width 1.2rem
    right 0
    text-align center
    .iconfont
      font-size 0.8rem
      color #555

  .search-box
    position relative
    display inline-block
    width 100%
    height 0.7rem
    // border 1px solid #ccc
    box-sizing border-box
    border-radius 2rem
    // padding 0.1rem 1rem 0.1rem 2rem
    padding 0.1rem 1rem 0.1rem 1rem
    background #e4e4e4
    .search-input
      display block
      width 100%
      height 100%
      border 0
      font-size 0.3rem
      background none
    .icon-search
      position absolute
      top 0.15rem
      left 0.4rem
      font-size 0.42rem
      color #aaa
    .icon-delete_fill
      position absolute
      top 0.1rem
      right 0.4rem
      font-size 0.5rem
      color #9c9c9c

  .cancel
    width 1.4rem
    font-size 0.4rem
    text-align center
    display inline-block
    color #888
</style>
